<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>
<script>
    /**
     * 面向对象的开发方式
     *    面向对象的思想可以理解成一种解决问题的思想
     *    面向对象的特征: 封装  继承  多态
     *      封装值得是对变量和函数的封闭,把变量和函数封装到对象当中,变成了属性和方法
     *      变量和属性的性质是一样的,都是用来存储数据的, 把对象所特有的特征或特性抽象对象的属性把对象的行为或是动作抽象成对象的方法
     *
     * 分析一个项目当中有哪些对象
     *      蛇 : 宽高  坐标  move  eat
     *      食物 : 坐标  宽高  背景色
     *      地图 : 宽高
     *
     * 1. 设置地图盒子并添加基础样式
     * 2. 创建食物盒子 : (1)动态创建div盒子; (2)给盒子设置样式宽高,随机颜色,随机坐标
     * 3. 创建蛇盒子 : (1)动态创建蛇头和蛇身. (2)分别给蛇中的盒子设置样式(宽高,颜色,位置)
     * 4. 让蛇动起来 : (1)让蛇身盒子,从后面改变到前一个坐标位置, (2)设置蛇头的方向判断并根据方向移动坐标. (3)开启定时器
     * 5. 让蛇吃食物 : (1)检测蛇头位置坐标与当前食物坐标,判断坐标相同,执行食物移除,添加蛇的长度 开启新的食物
     * 6. 边界碰撞检测 : (1)判断蛇头位置不能移动小于0 且不能超过地图盒子的宽度和高度
     */
</script>